<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="Steper Kuo">
	<title>CSS: img - srcset</title>

	<!-- Favicons -->
	<link rel="apple-touch-icon" sizes="152x152" href="./assets/img/apple-icon-152x152.png">
	<link rel="icon" type="image/png" sizes="16x16" href="./assets/img/favicon-16x16.png">

	<!-- Style custom *** CSS -->
	<style id="demoCSS" type="text/css">
		/* Demo's CSS here */
		.img-srcset-x
		{
			width: 180px;
		}
		.img-srcset-w
		{
			width: 100%;
		}
	</style>

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

</head>
<body>

<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.js?type=split-ssc"></script>

<main>

	<!-- Demos -->
	<section id="demos">
		<div class="row">
			<div id="demoWrap" class="large-12 columns">
				<h3 id="overview">Overview</h3>
				<div id="demoHTML1" data-toggle="previewCode" data-position="append">
					<!--Demo's html here-->
					<img class="img-srcset-x"
							 src="https://dummyimage.com/16:9x180&text=320x180-1x"
							 srcset="https://dummyimage.com/16:9x360&text=640x360-2x 2x, https://dummyimage.com/16:9x540&text=960x540-3x 3x, https://dummyimage.com/16:9x720&text=1280x720-4x 4x">
					<p>img placeholder 320x180, default: 1x</p>
				</div>
				<div id="demoHTML2" data-toggle="previewCode" data-position="append">
					<!--Demo's html here-->
					<img class="img-srcset-w"
							 src="https://dummyimage.com/16:9x1080&text=1920x1080-1920w"
							 srcset="https://dummyimage.com/16:9x360&text=640x360-640w 640w, https://dummyimage.com/16:9x540&text=960x540-960w 960w, https://dummyimage.com/16:9x720&text=1280x720-1280w 1280w, https://dummyimage.com/16:9x1080&text=1920x1080-1920w 1920w">
				</div>
				<div>
					<p>width * dpi <= 640w => 640x360-640w</p>
					<p>640w < width * dpi <= 960w => 960x540-960w</p>
					<p>960w < width * dpi <= 1280w => 1280x720-1280w</p>
					<p>960w < width * dpi <= 1290w => 1920x1080-1920w</p>
				</div>
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>

<!-- Script Demo *** JS -->
<script id="demoJS" type="text/javascript">
	// Demo's JS here

</script>

</body>
</html>